<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bootstrap应用</title>
		<!---引入jquery资源--->
		<script src="js/bootstrap-3.3.7-dist/js/jquery.min.js" type="text/javascript"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<!--引入bootstrap的核心js资源文件--->
		<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-4">col-md-4
				</div>
				<div class="col-md-4">col-md-4
				</div>
				<div class="col-md-4">col-md-4
				</div>
			</div>
			<div class="row">

				<div class="col-md-4 col-md-offset-8">col-md-4 col-md-offset-4
				</div>

			</div>
			<div class="row">
				<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4
				</div>
				<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4
				</div>
				<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-sm-4 col-sm-offset-0
				</div>
			</div>
			
			<p>通过添加 <code>.table-hover</code> 类可以让 <code>&lt;tbody&gt;</code> 中的每一行对鼠标悬停状态作出响应。</p>
  <div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
    </table>
  </div><!-- /example -->
  <br>
  	<!----table标签---->
		<table  class="table table-hover">
			<!---tbaody标签可以省略----->
			<tbody align="center">
				<!---tr：行标签，一个tr标签表示一行，tr标签只能写在table标签中，不能单独存在，tr标签中只有td或th标签----->
				<tr align="right">
					<!---td：列标签，一个td标签表示一列，td标签只能写在table的tr标签中，不能单独存在。				
					td标签是一个容器标签可以继续嵌套其他的标签或者一个表格----->
					
					
					<!--当多层标签的相同属性同时作用时，改属性的最终的结果取决于以下原则：
						范围最小优先原则；
						就近原则；
					--->
					<th colspan="2" align="left">
						第一行第一列
					</th>
					<td>
						第一行第二列
					</td>
					<td>
						第一行第三列
					</td>
				</tr>
				<tr>
					<td rowspan="2">
						第二行第一列
					</td>
					<td>
						第二行第二列
					</td>
					<td>
						第二行第三列
					</td>
					<td>
						第二行第四列
					</td>
				</tr>
				<tr>
					<td>
						第三行第一列
					</td>
					<td valign="top">
						第三行第二列
					</td>
					<td>
						第三行第二列
					</td>
					
				</tr>
			</tbody>

		</table>
  
  		<br>
  		<div class="row">
				<div class="col-md-4">
					<img src="imgs/img300-300.png" style="height: 300px;width: 300;" alt="图片不显示时的提示内容" class="img-circle" />
				</div>
				<div class="col-md-4">col-md-4
				</div>
				<div class="col-md-4">col-md-4
				</div>
			</div>	
		</div>
	</body>

</html>